<script setup lang="ts">
import {useStore} from "vuex";
// @ts-ignore
import * as echarts from "echarts";
import {computed, onMounted} from "vue";

const store = useStore();

const user = computed(()=> JSON.parse(store.state.user))

const  aa = () =>{
  store.state.isCollpace = !store.state.isCollpace
}

//head (3个)
const arr = [
  {id:1,name:"客户总数",count:345},
  {id:2,name:"客群总数",count:17},
  {id:3,name:"客群成员总数",count:85}
]
//客户数据
const arr1 = [
  {id:1,name:"今日新增客户",count:1},
  {id:2,name:"今日跟进客户",count:0},
  {id:3,name:"今日流失客户",count:1},
  {id:4,name:"昨日发送申请",count:1}
]

const tb1 = () =>{
  var chartDom = document.getElementById('tb1');
  var myChart = echarts.init(chartDom);
  var option;

  const colors = ['#5470C6', '#EE6666'];

  option = {
    color: colors,
    tooltip: {
      trigger: 'none',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {},
    grid: {
      top: 70,
      bottom: 50
    },
    xAxis: [
      {
        type: 'category',
        axisTick: {
          alignWithLabel: true
        },
        axisLine: {
          onZero: false,
          lineStyle: {
            color: colors[1]
          }
        },
        axisPointer: {
          label: {
            formatter: function (params:any) {
              return (
                  'Precipitation  ' +
                  params.value +
                  (params.seriesData.length ? '：' + params.seriesData[0].data : '')
              );
            }
          }
        },
        // prettier-ignore
        data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
      },
      {
        type: 'category',
        axisTick: {
          alignWithLabel: true
        },
        axisLine: {
          onZero: false,
          lineStyle: {
            color: colors[0]
          }
        },
        axisPointer: {
          label: {
            formatter: function (params:any) {
              return (
                  'Precipitation  ' +
                  params.value +
                  (params.seriesData.length ? '：' + params.seriesData[0].data : '')
              );
            }
          }
        },
        // prettier-ignore
        data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: 'Precipitation(2015)',
        type: 'line',
        xAxisIndex: 1,
        smooth: true,
        emphasis: {
          focus: 'series'
        },
        data: [
          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
        ]
      },
      {
        name: 'Precipitation(2016)',
        type: 'line',
        smooth: true,
        emphasis: {
          focus: 'series'
        },
        data: [
          3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7
        ]
      }
    ]
  };

  option && myChart.setOption(option);
}

const tb2 = () =>{
  var chartDom = document.getElementById('tb2');
  var myChart = echarts.init(chartDom);
  var option;

  const colors = ['#5470C6', '#EE6666'];

  option = {
    color: colors,
    tooltip: {
      trigger: 'none',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {},
    grid: {
      top: 70,
      bottom: 50
    },
    xAxis: [
      {
        type: 'category',
        axisTick: {
          alignWithLabel: true
        },
        axisLine: {
          onZero: false,
          lineStyle: {
            color: colors[0]
          }
        },
        axisPointer: {
          label: {
            formatter: function (params:any) {
              return (
                  'Precipitation  ' +
                  params.value +
                  (params.seriesData.length ? '：' + params.seriesData[0].data : '')
              );
            }
          }
        },
        // prettier-ignore
        data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: 'Precipitation(2016)',
        type: 'line',
        smooth: true,
        emphasis: {
          focus: 'series'
        },
        data: [
          3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7
        ]
      }
    ]
  };

  option && myChart.setOption(option);
}

onMounted(() =>{
     tb1()
     tb2()
})

</script>

<template>
  <div>
<!--   导航区   -->
      <div class="a1">
        <el-icon size="23" @click="aa"><Fold /></el-icon>
        <div style="display: inline-block;margin-left: 10px;position: absolute;margin-top: 7px">
          <el-icon size="18" color="dodgerblue"><HomeFilled /></el-icon>
        </div>
        <div style="display: inline-block;margin-bottom: 5px;margin-left: 30px;margin-top: 10px">
          <el-breadcrumb separator="/" >
            <el-breadcrumb-item></el-breadcrumb-item>
            <el-breadcrumb-item>   <span style="font-size: 13px;color: black">运营中心</span> </el-breadcrumb-item>
            <el-breadcrumb-item>   <span style="font-size: 12px;color: gray">首页</span>   </el-breadcrumb-item>
            <el-breadcrumb-item>   <span style="font-size: 12px;color: gray">控制台</span>  </el-breadcrumb-item>
          </el-breadcrumb>
        </div>

      </div>
<!--  登录信息 和 统计  -->
       <div class="a2"  >

           <div style="width: 100%;height: 135px;background-color: white;border-radius:5px">
             <div style="position: absolute;margin-left: 20px;margin-top: 15px;display: inline-block">
               <img :src="user.avatar" width="100px" height="100px" style="border-radius: 10px">
             </div>
             <div style="position: absolute;margin-left: 140px;margin-top: 20px">
                <div style="font-size: 16px">
                  你好,
                </div>
                <div style="margin-top: 10px;font-size: 18px;font-weight: bold">
                  {{user.nickName}}
                </div>
                <div style="width: 50px;height: 20px;border-radius: 50px;background-color:lightgreen;margin-top: 21px">

                </div>
             </div>
             <div style="position: absolute;margin-left: 380px">
                 <ul class="ula">
                    <li class="lia" v-for="l in arr" :key="l.id">
                      <div style="font-size: 16px;display: inline-block">{{l.name}}</div>
<!--                      <div style="margin-left: 40px;display: inline-block">-->
<!--                        <el-icon color="gray"><QuestionFilled /></el-icon>-->
<!--                      </div>-->
                      <div style="font-size: 35px;font-weight: bold;color:#337ecc;margin-left: 30px;margin-top: 8px">{{l.count}}</div>
                    </li>
                 </ul>
             </div>
           </div>
         <!--  客户数据   -->
           <div style="width: 100%;height: 600px;background-color: white;margin-top: 10px;border-radius: 5px">

             <div style="position: absolute;margin-top: 15px;margin-left: 15px">
                <span style="font-size: 20px;font-weight: bold">客户数据</span>
              </div>

              <div style="position: absolute;margin-top: 60px;margin-left: 25px">
                 <ul class="ulb">
                   <li class="lib" v-for="l in arr1" :key="l.id">
                     <div style="margin-top:10px;margin-left: 15px;display: inline-block">
                       <span style="font-size: 13px;color:black;">
                         {{l.name}}
                       </span>
                     </div>
                       <div style="margin-left: 70px;display: inline-block;position: absolute;top: 14px">
                           <el-icon color="gray" size="15px"><QuestionFilled /></el-icon>
                       </div>
                     <div style="margin-top:3px;margin-left: 16px">
                       <span style="font-size: 18px;font-weight: bold">
                         {{l.count}}
                       </span>
                     </div>
                   </li>
                 </ul>
              </div>

              <div style="position: absolute;margin-top: 180px">
                <div id="tb1" style="width: 1000px;height: 420px">

                </div>
              </div>

           </div>

           <div style="width: 100%;height: 600px;background-color: white;margin-top: 10px;border-radius: 5px">
             <div style="position: absolute;margin-top: 15px;margin-left: 15px">
               <span style="font-size: 20px;font-weight: bold">客群数据</span>
             </div>

             <div style="position: absolute;margin-top: 60px;margin-left: 25px">
               <ul class="ulb">
                 <li class="lib" v-for="l in arr1" :key="l.id">
                   <div style="margin-top:10px;margin-left: 15px;display: inline-block">
                       <span style="font-size: 13px;color:black;">
                         {{l.name}}
                       </span>
                   </div>
                   <div style="margin-left: 70px;display: inline-block;position: absolute;top: 14px">
                     <el-icon color="gray" size="15px"><QuestionFilled /></el-icon>
                   </div>
                   <div style="margin-top:3px;margin-left: 16px">
                       <span style="font-size: 18px;font-weight: bold">
                         {{l.count}}
                       </span>
                   </div>
                 </li>
               </ul>
             </div>

             <div style="position: absolute;margin-top: 180px">
               <div id="tb2" style="width: 1000px;height: 420px">

               </div>
             </div>
           </div>
       </div>

       <div class="a3">
           <div style="width: 100%;height:250px;background-color: white;border-radius: 5px">
               <div style="position:absolute;margin-top: 30px;margin-left: 20px">
                 <span style="font-size: 16px;font-weight: bold">仟微科技</span>
               </div>
               <div style="position:absolute;margin-top: 70px;margin-left: 20px">
                 <span style="font-size: 14px;color: gray">当前版本</span>
                 <span style="font-size: 14px;color: gray;margin-left: 120px">标准版</span>
               </div>
             <div style="position:absolute;margin-top: 110px;margin-left: 20px">
               <span style="font-size: 14px;color: gray">使用人数</span>
               <span style="font-size: 14px;color: gray;margin-left: 145px">24</span>
             </div>
             <div style="position:absolute;margin-top: 150px;margin-left: 20px">
               <span style="font-size: 14px;color: gray">到期时间</span>
               <span style="font-size: 14px;color: gray;margin-left: 120px"></span>
             </div>
           </div>

           <div style="width: 100%;height:550px;margin-top: 15px;border-radius: 5px;background-color: white">
               <div style="width: 100%;height: 60px;background: linear-gradient(135deg, #a1c4fd, #c2e9fb);border-top-left-radius: 5px;border-top-right-radius:5px">
                   <div style="width: 5px;height: 17px;background-color: #337ecc;border-radius:20px;margin-left: 20px;position: absolute;margin-top: 20px"></div>
                   <div style="font-size: 18px;font-weight: bold;font-family: 楷体;position: absolute;margin-left: 35px;margin-top: 18px">企业动态</div>
               </div>
           </div>

           <div style="width: 100%;height:327px;margin-top: 15px;border-radius: 5px;background-color: white">
               
           </div>

         <div style="width: 100%;height:183px;margin-top: 15px;border-radius: 5px;background-color: white">

         </div>
       </div>

  </div>
</template>

<style scoped lang="scss">
 .a1{
   width: 100%;
   height: 50px;
 }
 .a2{
   width: 79%;
   height:100%;
   margin-top: 15px;
   display: inline-block;
 }
 .a3{
   width: 20%;
   height: 100%;
   margin-left: 10px;
   display: inline-block;
 }
 .ula{
   list-style: none;
 }
 .ulb{
   list-style: none;
 }
 .lia{
   display: inline-block;
   width: 160px;
   height: 100px;
   margin-top: 24px;
   margin-left: 30px;
 }
 .lib{
   display: inline-block;
   width: 200px;
   height: 80px;
   margin-left: 15px;
   background-color:whitesmoke;
 }
</style>